<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>个人信息修改（学生）</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f8f9fa;
    }
    .form-container {
      width: 450px;
      padding: 30px;
      background-color: #ffffff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
    }
    .form-container h3 {
      text-align: center;
      margin-bottom: 30px;
      color: #333;
    }
    .form-control {
      margin-bottom: 15px;
    }
    .input-group-text {
      cursor: pointer;
    }
  </style>
</head>
<body>
<div class="form-container">
  <h3>个人信息修改（学生）</h3>
  <form action="/updatePerson1" method="post">
    <input type="hidden" name="id" th:value="${id}" readonly>
    <div class="form-group">
      <input class="form-control" name="username" type="text" th:value="${username}" readonly placeholder="姓名">
    </div>
    <div class="form-group">
      <div class="input-group">
        <input class="form-control" id="pwd" name="pwd" type="password" th:value="${pwd}" placeholder="密码">
        <div class="input-group-append">
          <span class="input-group-text" onclick="togglePassword()">显示</span>
        </div>
      </div>
    </div>
    <div class="form-group">
      <input class="form-control" name="sex" type="text" th:value="${sex}" readonly placeholder="性别">
    </div>
    <div class="form-group">
      <input class="form-control" name="className" type="text" th:value="${className}" readonly placeholder="班级">
    </div>
    <div class="form-group">
      <input class="form-control" name="gradeName" type="text" th:value="${gradeName}" readonly placeholder="年级">
    </div>
    <button type="submit" class="btn btn-primary btn-lg btn-block">修改</button>
  </form>
</div>

<script>
  function togglePassword() {
    var pwd = document.getElementById("pwd");
    var togglePassword = document.querySelector(".input-group-text");
    if (pwd.type === "password") {
      pwd.type = "text";
      togglePassword.textContent = "隐藏";
    } else {
      pwd.type = "password";
      togglePassword.textContent = "显示";
    }
  }
</script>
</body>
</html>
